<template>
  <div class="chart-container hide-scroller-bar" ref="centerControlDevice">
    <a-row :gutter="[16, 16]">
      <a-col :span="24" class="total-info">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__pulse"
        >
          <DeviceNumTotal />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <DeviceLightingTotal />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <DeviceAirconditionTotal />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <AirconditionEnergy />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle" v-if="showLiftTotal">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <LiftTotal @onShow="onShowLiftTotal"/>
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle" v-if="showLiftStatus">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <LiftStatus  @onShow="onShowLiftStatus"/>
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <AirconfitionElUse />
        </transition>
      </a-col>
      <a-col :xs="24" :sm="6" class="col-box" :style="colStyle">
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <LiftCapacityTrend />
        </transition>
      </a-col>
      <a-col
        :xs="24"
        :sm="6"
        class="col-box"
        :style="$store.getters.dataVMobile ? '' : colStyle"
      >
        <transition
          appear
          name="animate__animated animate__bounce"
          enter-active-class="animate__zoomIn"
        >
          <DeviceAbnormalRecord />
        </transition>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
} from "vue";
import store from "../../../../store/index";
import DeviceNumTotal from "./DeviceNumTotal.vue";
import DeviceLightingTotal from "./DeviceLightingTotal.vue";
import DeviceAirconditionTotal from "./DeviceAirconditionTotal.vue";
import LiftTotal from "./LiftTotal.vue";
import LiftStatus from "./LiftStatus.vue";
import AirconfitionElUse from "./AirconfitionElUse.vue";
import LiftCapacityTrend from "./LiftCapacityTrend.vue";
import DeviceAbnormalRecord from "./DeviceAbnormalRecord.vue";
import AirconditionEnergy from "./AirconditionEnergy.vue";

export default defineComponent({
  name: "CenterControlDevice",
  components: {
    DeviceNumTotal,
    DeviceLightingTotal,
    DeviceAirconditionTotal,
    LiftTotal,
    LiftStatus,
    AirconfitionElUse,
    LiftCapacityTrend,
    DeviceAbnormalRecord,
    AirconditionEnergy,
  },
  setup() {
    const state = reactive({
      centerControlDevice: null,
      pageHeight: 900,
      rowHeight: 300,
      rowNum: 2, // 均分的行数
      totalRowNum: 3,
      rowGap: 16,
      showLiftStatus: true,
      showLiftTotal: true
    });

    const colStyle = computed(() => `height:${state.rowHeight}px`);

    watch(
      () => store.getters.resizeTrigger,
      () => {
        getPageHeight();
      }
    );

    const getPageHeight = () => {
      state.pageHeight = state.centerControlDevice.offsetHeight;
      state.rowHeight = Math.floor(
        (state.pageHeight - state.pageHeight * 0.12) / state.rowNum -
          state.rowGap -
          6
      );
    };

    // 电梯运行状态
    const onShowLiftStatus = (isShow) => {
      state.showLiftStatus = isShow
    }

    // 电梯统计
    const onShowLiftTotal = (isShow) => {
      state.showLiftTotal = isShow
    }


    onMounted(() => {
      getPageHeight();
    });

    return {
      colStyle,
      ...toRefs(state),
      onShowLiftStatus,
      onShowLiftTotal
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.chart-container {
  overflow: hidden auto;
  margin-top: 6px;
  .col-box {
    // height: 40%;
    min-height: 220px;
  }
  .total-info {
    height: 12%;
    min-height: 80px;
  }
}
</style>
